<template>
  <div class="liteflow-editor-container">
    <lite-flow-editor
      :data="JSON.stringify(editorData)"
      @ready="handleReady"
      @liteflow:save="handleSave"
    ></lite-flow-editor>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import './wrapper'
// 引入必要的样式
import '@antv/x6/dist/x6.css'
import 'antd/dist/reset.css'

const editorData = ref({
  // 添加一些初始数据
  nodes: [],
  edges: [],
  // 其他配置
  config: {
    // 编辑器配置
  }
})

const handleReady = (event: CustomEvent) => {
  const graph = event.detail
  console.log('graph ready:', graph)
  // 可以在这里进行初始化操作
}

// 处理保存事件
const handleSave = (event: CustomEvent) => {
  const saveData = event.detail
  console.log('Save data:', saveData)
}

onMounted(() => {
  console.log('Vue component mounted')
})
</script>

<style scoped>
.liteflow-editor-container {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  flex: 1;
}

:deep(lite-flow-editor) {
  width: 100%;
  height: 100%;
  display: block;
}

:deep(lite-flow-editor > div) {
  width: 100%;
  height: 100%;
}
</style>
